<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { cacheFindById, cacheValueAdd, cacheValueDelete } from '@/api/system/cache'
import { Modal } from '@arco-design/web-vue'
import { useRoute } from 'vue-router'

//路由参数对象
const route = useRoute()

//刷新
const list = reactive({
  refresh: () => {
    const id = route.query.id
    //@ts-ignore
    cacheFindById(id).then(resp => {
      const data = resp.data
      list.list = data.cacheValue
    })
  },
  list: []
})

// 操作数据表单
const operationForm = reactive({
  // 弹框标题
  title: '添加用户',
  // 是否显示
  visible: false,
  // 表单
  form: {} as any,
  // 验证
  rules: {
    key: [{ required: true, message: '显示值不能为空' }],
    value: [{ required: true, message: '存储值不能为空' }]
  },
  reset: () => {
    operationForm.form = {
      cacheId: Number(route.query.id),
      id: null,
      key: '',
      value: ''
    }
  },
  // 打开弹框
  open: () => {
    operationForm.title = '添加缓存值'
    operationForm.visible = true
    operationForm.reset()
  },
  remove: (record: any) => {
    Modal.confirm({
      title: '警告！',
      content: `是否确认删除 [${record.key}] 缓存？`,
      onOk(e) {
        cacheValueDelete(record.id).then(() => {
          list.refresh()
        })
      }
    })
  },
  submit: ({ errors, values }: any) => {
    if (errors) return
    //添加缓存值
    cacheValueAdd(values).then(() => {
      list.refresh()
      operationForm.visible = false
    })
  }
})

onMounted(() => {
  list.refresh()
  document.title = `Rocc管理系统 缓存管理-${route.query.name}`
})

</script>

<template>
  <div class="w-full h-full">
    <div class="flex justify-between mr-1">
      <a-space wrap>
        <a-button type="primary" @click="operationForm.open">
          <template #icon>
            <icon-plus />
          </template>
          添加缓存值
        </a-button>
      </a-space>
      <a-space>
        <a-tooltip content="刷新列表" @click="list.refresh">
          <a-button size="small" shape="circle">
            <template #icon>
              <icon-refresh />
            </template>
          </a-button>
        </a-tooltip>
      </a-space>
    </div>
    <a-drawer v-model:visible="operationForm.visible" :title="operationForm.title" :width="500" :footer="false">
      <a-form ref="operationFormRef" :rules="operationForm.rules" :model="operationForm.form"
              @submit="operationForm.submit">
        <a-form-item label="显示值" field="key" validate-trigger="blur" hide-asterisk>
          <a-input v-model="operationForm.form.key" />
        </a-form-item>
        <a-form-item label="存储值" field="value" validate-trigger="blur" hide-asterisk>
          <a-input v-model="operationForm.form.value" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">
            提交
          </a-button>
        </a-form-item>
      </a-form>
    </a-drawer>

    <a-table :data="list.list" :pagination="false">
      <template #columns>
        <a-table-column title="ID" data-index="id"></a-table-column>
        <a-table-column title="显示值" data-index="key"></a-table-column>
        <a-table-column title="存储值" data-index="value"></a-table-column>
        <a-table-column title="操作" width="160">
          <template #cell="{record}">
            <a-space>
              <a-button status="danger" @click="operationForm.remove(record)">
                <template #icon>
                  <icon-delete />
                </template>
                删除
              </a-button>
            </a-space>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>

<style scoped>

</style>
